<template>
  <div class="password-page">
    <div class="password-container">
      <div class="password-card">
        <h2 class="password-title">パスワードを変更する</h2>
        <el-form 
          ref="passwordFormRef" 
          :model="passwordForm" 
          :rules="passwordRules" 
          class="password-form"
        >
          <div class="form-group">
            <label class="form-label">旧パスワード</label>
            <el-input 
              v-model="passwordForm.old_password" 
              type="password" 
              placeholder=""
              show-password
              class="form-input"
            />
          </div>
          
          <div class="form-group">
            <label class="form-label">新パスワード</label>
            <el-input 
              v-model="passwordForm.now_password" 
              type="password" 
              placeholder=""
              show-password
              class="form-input"
            />
          </div>
          
          <div class="form-group">
            <label class="form-label">再度パスワードを入力</label>
            <el-input 
              v-model="passwordForm.renow_password" 
              type="password" 
              placeholder=""
              show-password
              class="form-input"
            />
          </div>
          
          <div class="form-actions">
            <el-button 
              type="primary" 
              :loading="submitting" 
              @click="submitPasswordChange"
              class="update-btn"
            >
              更新
            </el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { userApi } from '../../../api/index'

const submitting = ref(false)
const passwordFormRef = ref(null)

// 密码表单数据
const passwordForm = ref({
  old_password: '',
  now_password: '',
  renow_password: ''
})

// 密码表单验证规则
const passwordRules = {
  old_password: [
    { required: true, message: '请输入旧密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' }
  ],
  now_password: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' }
  ],
  renow_password: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.value.now_password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 提交密码修改
const submitPasswordChange = async () => {
  if (!passwordFormRef.value) return
  
  await passwordFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        submitting.value = true
        const res = await userApi.changeLoginPassword(passwordForm.value)
        
        if (res.code === 1) {
          ElMessage.success('密码修改成功')
          resetPasswordForm()
        } else {
          ElMessage.error(res.msg || '密码修改失败')
        }
      } catch (error) {
        console.error('密码修改失败:', error)
        ElMessage.error('密码修改失败，请稍后重试')
      } finally {
        submitting.value = false
      }
    }
  })
}

// 重置密码表单
const resetPasswordForm = () => {
  if (passwordFormRef.value) {
    passwordFormRef.value.resetFields()
  }
}
</script>

<style scoped>
.password-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
}

/* 密码修改页面样式 */
.password-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 400px;
  padding: 40px 20px;
}

.password-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 40px;
  width: 100%;
  max-width: 500px;
  border: 1px solid #e8e8e8;
}

.password-title {
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin: 0 0 30px 0;
  text-align: center;
}

.password-form {
  width: 100%;
}

.form-group {
  margin-bottom: 25px;
}

.form-group .form-label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 400;
}

.form-group .form-input {
  width: 100%;
}

.form-group .form-input :deep(.el-input__wrapper) {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
}

.form-group .form-input :deep(.el-input__wrapper:focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.form-actions {
  margin-top: 30px;
  text-align: center;
}

.update-btn {
  background-color: #4a90e2;
  border-color: #4a90e2;
  color: white;
  padding: 12px 40px;
  font-size: 14px;
  border-radius: 4px;
  font-weight: 400;
}

.update-btn:hover {
  background-color: #3a7bc8;
  border-color: #3a7bc8;
}

.update-btn:focus {
  background-color: #3a7bc8;
  border-color: #3a7bc8;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .password-container {
    padding: 20px 10px;
  }
  
  .password-card {
    padding: 30px 20px;
  }
}
</style>